<template>
  <div class="system-add-user-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
      <el-form ref="ruleFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="rules">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="租户名称" prop="name">
              <el-input v-model="state.ruleForm.name" placeholder="请输入租户名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="租户号" prop="tenantId">
              <el-input-number :min="1" :max="10000" v-model="state.ruleForm.tenantId" placeholder="请输入租户号"
                type="password" clearable></el-input-number>
              <span></span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="租户状态">
              <el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="有效时间" prop="effectiveTime">
              <el-date-picker v-model="state.ruleForm.effectiveTime" type="datetimerange" format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="租户角色" prop="tenantRoleId">
              <el-select v-model="state.ruleForm.tenantRoleId" placeholder="请选择" clearable>
                <el-option v-for="item in state.roleList" :key="item.id" :label="item.roleName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="tenantDialog">
import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
import { useTenantApi } from "/@/api/tenant";
const tenantApi = useTenantApi()

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const ruleFormRef = ref();
const state = reactive({
  roleList: [],
  ruleForm: {
    tenantId: -1,
    name: '',
    tenantRoleId: '',
    effectiveTime: [],
    status: true,
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});
const rules = reactive({
  name: [
    { required: true, message: '租户名称不能为空', trigger: 'blur' },
  ],
  tenantId: [
    { required: true, message: '租户号不能为空', trigger: 'blur' },
  ],
  tenantRoleId: [
    { required: true, message: '角色不能为空', trigger: 'blur' },
  ],
  effectiveTime: [
    { required: true, message: '时间不能为空', trigger: 'blur' },
  ]
})
// 打开弹窗
const openDialog = (type, id) => {

  tenantApi.tenantRoleSelect().then(res => {
    state.roleList = res.data.list;
  })


  if (type === 'edit') {

    state.dialog.title = '修改租户';
    state.dialog.submitTxt = '修 改';

    tenantApi.tenantInfo(id).then(res => {
      state.ruleForm.tenantId = res.data.tenantId;
      state.ruleForm.name = res.data.name;
      state.ruleForm.status = res.data.status;
      state.ruleForm.effectiveTime = [res.data.startTime, res.data.endTime]
      state.ruleForm.tenantRoleId = res.data.tenantRoleId;
    })

  } else {
    state.dialog.title = '新增租户';
    state.dialog.submitTxt = '新 增';


    // 获取最大租户id
    tenantApi.tenantMaxId().then(res => {
      state.ruleForm.tenantId = res.data.tenantId;
      console.log("jfdjf:" + state.ruleForm.tenantId)
    })


    nextTick(() => {
      ruleFormRef.value.resetFields();
		});
  }


  state.dialog.type = type;
  state.dialog.isShowDialog = true;

};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 新增
const onSubmit = () => {

  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      if (state.dialog.type === 'edit') {
        let params = {
          'tenantId': state.ruleForm.tenantId,
          "name": state.ruleForm.name,
          "tenantId": state.ruleForm.tenantId,
          "startTime": state.ruleForm.effectiveTime[0],
          "endTime": state.ruleForm.effectiveTime[1],
          "status": state.ruleForm.status,
          "tenantRoleId": state.ruleForm.tenantRoleId,
        }
        tenantApi.tenantUpdate(params).then(() => {
          closeDialog();
          emit("refresh")
        })
      } else {
        let params = {
          'tenantId': state.ruleForm.tenantId,
          "name": state.ruleForm.name,
          "tenantId": state.ruleForm.tenantId,
          "startTime": state.ruleForm.effectiveTime[0],
          "endTime": state.ruleForm.effectiveTime[1],
          "status": state.ruleForm.status,
          "tenantRoleId": state.ruleForm.tenantRoleId,
        }
        tenantApi.tenantAdd(params).then(() => {
          closeDialog();
          emit("refresh")
        })
      }
    }
  })
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
